<template>
    <div class="date-time-container">
        <div class="text-color current_time">{{ currentTime }}</div>
        <div class="text-color current_date">{{ currentDate }}</div>
    </div>
</template>

<script setup>

const currentTimeInterval = ref()
const currentTime = ref(new Date().toLocaleTimeString())
const currentDate = ref("")

const getDate = () => {
    // 获取当前日期对象
    const today = new Date();

    // 获取日期组件
    const year = today.getFullYear();
    const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从0开始
    const day = String(today.getDate()).padStart(2, '0');

    // 获取星期（0-6对应周日-周六）
    const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    const weekday = weekdays[today.getDay()];

    // 格式化输出
    const dateString = `${year}-${month}-${day} ${weekday}`;
    return dateString
}

onMounted(() => {
    currentTimeInterval.value = setInterval(() => {
        currentTime.value = new Date().toLocaleTimeString()
        currentDate.value = getDate()
    }, 500)
})

onUnmounted(() => {
    clearInterval(currentTimeInterval.value)
})
</script>

<style scoped lang="scss">
.date-time-container {
    width: 100%;
}

.text-color {
    color: var(--lan-main-font-color);
}

.current_time {
    font-size: 36px;
    font-weight: bold;
}

.current_date {
    font-size: 16px;
}
</style>